<template>
    <div class="qilin-skill">
        <!-- 打印内容区域 -->
        <div ref="printContent" id="printContent" class="print-content">
            <!-- 这里放你要打印的内容 -->
            <div class="print-container">
                <h1>打印测试</h1>
                <p>这是一段测试打印功能的文本</p>
                <div class="print-container-box">
                    <QilinView v-model:viewConfig="viewConfig" ref="viewConfigRef">
                        <template v-slot:mainDeptName="slotData">
                            <span class="single-ellipsis">产品研发部</span>
                        </template>
                    </QilinView>
                    <div class="qilin-processApproval-list">
                        <div class="qilin-processApproval-list-title">流程审批</div>
                        <div class="qilin-processApproval-list-container hide-scrollbar">
                            <div class="qilin-processApproval-list-container-item" v-for="item in 2">
                                <div class="item-header">
                                    <div class="item-header-subtext">
                                        {{"Q"}}
                                    </div>
                                    <div class="item-header-text">
                                        <div class="item-header-text-info">
                                            <div class="item-header-text-info-name single-ellipsis">{{"Qilin"}}</div>
                                            <div class="item-header-text-info-deptName">{{"产品研发部"}}</div>
                                        </div>
                                        <div class="item-header-text-date">{{"2025-03-28"}}</div>
                                    </div>
                                </div>
                                <div class="item-content">
                                    <div class="item-content-text">
                                        {{"叮咚鸡"}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <QilinExplain title="打印（方案一）（使用window.print()实现基础打印）" date="2025-03-28">
            <template v-slot:content>
                <el-button type="primary" @click="openPrintPreview">打印预览</el-button>
                <el-button type="primary" @click="()=>{submitConfirmDialog1()}">直接打印</el-button>
            </template>
        </QilinExplain>
        <QilinExplain title="打印（方案二）（使用vue-print-nb插件实现基础打印）" date="2025-03-28">
            <template v-slot:content>
                <el-button type="primary" v-print="printObj">打印</el-button>
            </template>
        </QilinExplain>
    </div>
    <QilinDialog v-model:dialogConfig="dialogConfig1" @handleClose="handleCloseDialog1" @submitConfirm="submitConfirmDialog1">
        <div class="preview-content">
            <div v-html="previewHtml"></div>
        </div>
    </QilinDialog>
</template>

<script setup>


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
const printContent = ref(null); //打印内容区域
const previewHtml = ref(""); //预览内容
const printObj = ref({
    id:"printContent",
    popTitle:"打印标题",
    extraHead:`
        <style>
            body { font-family: "楷体"; margin: 0; padding: 20px; }
            table { border-collapse: collapse; width: 100%; }
            @media print {
                .no-print { display: none !important; }
                body { padding: 0; }
            }
        </style>
    `
});


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
// 点击打印预览按钮事件监听
const openPrintPreview = ()=>{
    // console.log(printContent.value.innerHTML);
    previewHtml.value = printContent.value.innerHTML;
    dialogConfig1.isShow = true;
};
// 获取打印内容区域特定样式表
const getDocumentStyles = ()=>{
    const styleSheets = Array.from(document.styleSheets); //获取所有样式表
    // console.log(styleSheets);
    let styles = "";
    styleSheets.forEach((sheet)=>{
        try{
            // console.log(sheet.cssRules);
            if(sheet.cssRules){
                // console.log(sheet.href,"-------")
                Array.from(sheet.cssRules).forEach((rule)=>{
                    if(rule.selectorText && ( rule.selectorText.includes(".print-container") || rule.type === CSSRule.FONT_FACE_RULE)){
                        styles += rule.cssText + "\n";
                    }
                });
            }
        } catch(e){
            console.log("无法读取样式表",sheet.href,e);
        }
    });
    return styles;
};
// 关闭打印预览弹窗事件监听
const handleCloseDialog1 = ()=>{
    dialogConfig1.isShow = false;
};
// 点击打印预览弹窗内打印按钮事件监听
const submitConfirmDialog1 = ()=>{
    handleCloseDialog1();
    const styles = getDocumentStyles();
    const printWindow = window.open("","_blank");
    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
            <head>
                <title>打印</title>
                <style>
                    ${styles}
                    body { font-family: "楷体"; margin: 0; padding: 20px; }
                    table { border-collapse: collapse; width: 100%; }
                    @media print {
                        .no-print { display: none !important; }
                        body { padding: 0; }
                    }
                </style>
            </head>
            <body>
                ${printContent.value.innerHTML}
                <script>
                    console.log(1111);
                    window.onload = function() {
                        setTimeout(function() {
                            console.log(4444)
                            window.print();
                            window.close();
                        }, 500);
                    };
                <\/script>
            </body>
        </html>
    `);
    printWindow.document.close();
};

// 打印预览弹窗配置项
const dialogConfig1 = reactive({
    isShow:false,
    title:"打印预览",
    confirmBtnConfig:{
        btnName:"打印"
    },
    width:1200
});
// 查看组件配置项
const viewConfig=reactive({
    isTable:true,
    // tableBorderColor:"red",
    headerConfig:{
        hideHeader:true
    },
    itemConfig:[
        {
            label:"发文标题",
            value:"title",
            type:"text",
            labelSuffix:"：",
            col:12
        },
        {
            label:"发文编号",
            value:"sendNumber",
            type:"text",
            labelSuffix:"：",
            col:12
        },
        {
            label:"发文拟稿人",
            value:"sendPerson",
            type:"text",
            labelSuffix:"：",
            col:12
        },
        {
            label:"发文部门",
            value:"sendDeptName",
            type:"text",
            labelSuffix:"：",
            col:12
        },
        {
            label:"发文日期",
            value:"sendDate",
            type:"date",
            format:"yyyy-MM-dd",
            labelSuffix:"：",
            col:24
        },
        {
            label:"收文单位",
            value:"mainDeptName",
            type:"slot",
            slotName:"mainDeptName",
            labelSuffix:"：",
            col:24
        },
        {
            label:"图片",
            value:"image",
            type:"image",
            col:24
        }
    ],
    viewData:{
        title:"打印测试",
        sendNumber:"【2025-03-28】号",
        sendDeptName:"产品研发部",
        sendPerson:"Qilin",
        sendDate:"2025-03-28",
        mainDeptName:"产品研发部",
        image:[
            {
                fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ]
    }
});


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-skill{
    .print-content{
        background-color:#fff;
        margin-bottom:20px;
        padding:16px;
    }
}
@media print {
  .no-print {
    display: none !important;
  }
}
</style>
<style lang="scss">
.print-container{
    background-color:#fff;
    margin-bottom:20px;
    padding:16px;
    box-sizing: border-box;
    >.print-container-box{
        display:flex;
        width:100%;
        height:100%;
        .QilinView{
            flex:1;
            min-width:0;
            >.QilinView-header{
                padding-bottom:15px;
                border-bottom:1px solid $border-color;
                color:$text-color-85;
                font-weight:bolder;
            }
            >.QilinView-content{
                padding:20px;
                >.QilinView-content-row{
                    >.QilinView-content-row-col{
                        width:100%;
                        margin-bottom:20px;
                        display:flex;
                        align-items:center;
                        >.QilinView-content-row-col-label{
                            display:flex;
                            align-items:center;
                            height:100%;
                            max-width:200px;
                            box-sizing: border-box;
                            >span{
                                &.ellipsis{
                                    display:inline-block;
                                    width:100%;
                                    white-space:nowrap;
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                }
                            }
                        }
                        >.QilinView-content-row-col-value{
                            flex:1;
                            overflow:auto;
                            display:flex;
                            align-items:center;
                            >div{
                                width:100%;
                            }
                            >span{
                                display:inline-block;
                                height:auto;
                                cursor:default;
                                >.el-image{
                                    width:100px;
                                    height:100px;
                                    margin:5px;
                                    border-radius:4px;
                                }
                                &.link{
                                    color:#3c9cff;
                                    cursor:pointer;
                                }
                                &.file{
                                    color:#3c9cff;
                                    cursor:pointer;
                                    // text-decoration: underline;
                                }
                                &.textarea{
                                    display:inline-block;
                                    width:100%;
                                }
                                &.ellipsis{
                                    display:inline-block;
                                    width:100%;
                                    white-space:nowrap;
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                }
                                &.color{
                                    width:60px;
                                    height:18px;
                                    line-height:18px;
                                    border-radius:$radius-default;
                                }
                            }
                        }
                    }
                    &.el-row{
                        box-sizing: border-box;
                        display: flex;
                        flex-wrap: wrap;
                        position: relative;
                    }
                    &.table{
                        border:1px solid #E9E9E9;
                        border-left:none;
                        overflow:hidden;
                        border-radius:6px;
                        >.QilinView-content-row-col{
                            border-top:1px solid #E9E9E9;
                            margin-top:-1px;
                            margin-bottom:0;
                            display:flex;
                            align-items:center;
                            &:first-of-type{
                                border-radius:6px 0 0 0;
                                >.QilinView-col-label{
                                    border-radius:6px 0 0 0;
                                }
                            }
                            >.QilinView-content-row-col-label{
                                border-left:1px solid #E9E9E9;
                                // border-right:1px solid #E9E9E9;
                                padding: 10px 12px;
                                display:flex;
                                align-items:center;
                                width:50%;
                                color:rgba(0,0,0,0.85);
                                background-color:#FAFAFA;
                                height:100%;
                                box-sizing: border-box;
                                >span{
                                    &.ellipsis{
                                        display:inline-block;
                                        width:100%;
                                        white-space:nowrap;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                    }
                                }
                            }
                            >.QilinView-content-row-col-value{
                                border-left:1px solid #E9E9E9;
                                width:50%;
                                // height:100%;
                                color:rgba(0,0,65);
                                padding:10px;
                                >span{
                                    >.el-image{
                                        width:100px;
                                        height:100px;
                                        margin:5px;
                                        border-radius:4px;
                                        >img{
                                            width:100%;
                                            height:100%;
                                            object-fit: contain;
                                        }
                                    }
                                    &.textarea{
                                        display:inline-block;
                                        width:100%;
                                    }
                                    &.ellipsis{
                                        display:inline-block;
                                        width:100%;
                                        white-space:nowrap;
                                        overflow:hidden;
                                        text-overflow:ellipsis;
                                    }
                                    &.link{
                                        color:#3c9cff;
                                        cursor:pointer;
                                        // text-decoration: underline;
                                    }
                                    &.file{
                                        color:#3c9cff;
                                        cursor:pointer;
                                        // text-decoration: underline;
                                    }
                                }
                            }
                            &.el-col-24{
                                width:100%;
                                >label{
                                    width:20%;
                                }
                                >span{
                                    width:80%;
                                }
                            }
                            &.el-col-16{
                                width:66.667%;
                                >label{
                                    width:25%;
                                }
                                >span{
                                    width:75%;
                                }
                            }
                            &.el-col-12{
                                width:50%;
                                >label{
                                    width:40%;
                                }
                                >span{
                                    width:60%;
                                }
                            }
                            &.el-col-8{
                                width:33.333%;
                                >label{
                                    width:50%;
                                }
                                >span{
                                    width:50%;
                                }
                            }
                            &.el-col-6{
                                width:25%;
                                >label{
                                    width:66.5%;
                                }
                                >span{
                                    width:33.5%;
                                }
                            }
                        }
                    }
                }
            }
        }
        .qilin-processApproval-list{
            width:300px;
            padding:5px 15px 15px;
            display:flex;
            flex-direction:column;
            border-left:1px solid $border-color;
            >.qilin-processApproval-list-title{
                font-size:$medium-text-size;
                color:$text-color-85;
                position:relative;
                margin-left:12px;
                padding:10px 0;
                &::before{
                    content:"";
                    position:absolute;
                    width:4px;
                    height:50%;
                    left:-12px;
                    top:50%;
                    transform:translateY(-50%);
                    background-color:#3c9cff;
                    border-radius:2px;
                }
            }
            >.qilin-processApproval-list-container{
                padding:16px 0;
                flex:1;
                >.qilin-processApproval-list-container-item{
                    >.item-header{
                        display:flex;
                        >.item-header-subtext{
                            width:36px;
                            height:36px;
                            background-color:rgba(24,144,255,.2);
                            text-align:center;
                            line-height:36px;
                            color:#3c9cff;
                            font-size:$large-text-size;
                            border-radius:4px;
                            position:relative;
                            font-weight: bolder;
                            >img{
                                position:absolute;
                                right:-10%;
                                bottom:-10%;
                            }
                        }
                        >.item-header-text{
                            flex:1;
                            padding-left:16px;
                            // display:flex;
                            // justify-content:space-between;
                            // align-items:center;
                            >.item-header-text-info{
                                flex:1;
                                // padding-left:16px;
                                >.item-header-text-info-name{
                                    color:$text-color-65;
                                    width:100%;
                                }
                                >.item-header-text-info-deptName{
                                    color:$text-color-45;
                                    font-size:$small-text-size;
                                    margin-top:4px;
                                }
                            }
                            >.item-header-text-date{
                                color:$text-color-45;
                                font-size:$small-text-size;
                                white-space:nowrap;
                                margin-top: 6px;
                            }
                        }
                    }
                    >.item-content{
                        min-height: 36px;
                        margin: -10px 18px 12px;
                        border-left:1px dashed $border-color;
                        display:flex;
                        align-items:center;
                        >.item-content-text{
                            background-color:#F7F7F7;
                            padding:10px 15px;
                            margin:15px 0 0 25px;
                            flex:1;
                        }
                    }
                    &:last-child{
                        >.item-content{
                            display:none;
                        }
                    }
                }
            }
        }
    }
}

/* 打印时的样式--仅仅是打印和预览生效--不改变原页面样式 */
@media print {
  body {
    font-size: 12pt;
    color: black;
    // background: rgb(247, 175, 175); // 背景色需要再打印弹框里勾选才生效
  }

  /* 调整布局以适应打印 */
  #printMe {
    // border: 2px solid greenyellow;
    // width: 100% !important;
    width: 1078px !important; //794px;
    margin: 0;
    padding: 0px;

    /* 隐藏不需要打印的元素 */
    .no-print {
      display: none;
    }

    /* 将原先隐藏的元素 显示在打印内容里 */
    .show-print {
      display: block;
    }

    // 特殊处理样式
    .abc {
      background-color: #1fff; // 背景色需要再打印弹框里勾选才生效
      color: red;
    }

  }

  /* 其他打印样式 */
}
</style>

